<template>
    <!-- 商品详情页 -->
    <div class="productContainer">
        <!-- 导航栏 -->
        <my-nav-bar :title="product.productInfo.Name + '详情'"></my-nav-bar>
        <!-- 轮播图 -->
        <van-swipe 
            :autoplay="3000" 
            indicator-color="white" 
            :height="swipeh * 1" 
            ref="swipe" 
            @change="onChange"
        >
            <van-swipe-item
                v-for="(item, index) in product.productInfo.Picture"
                :key="item.imageUrl"
            >
                <img :src="item.imageUrl | joinPicUrl" alt="" @click="preview(index)">
            </van-swipe-item>
            <div class="custom-indicator" slot="indicator">
                <i>{{ current + 1 }}</i>
                /{{ count }}
            </div>
        </van-swipe>
        <!-- 简介 -->
        <div class="panel">
            <!-- 价格 -->
            <div class="priceWarp">
                <span class="newPrice">
                    <i>¥</i>
                    {{product.productInfo.SalePrice}}
                </span>
                <span
                    class="oldPrice"
                    v-if="product.productInfo.OriginPrice"
                >¥{{product.productInfo.OriginPrice}}</span>
            </div>
            <!-- 名字 -->
            <div class="name">
                <van-tag type="danger">热销</van-tag>
                {{product.productInfo.Name}}
            </div>
            <!-- 描述 -->
            <!-- <div class="desc" v-if="product.productInfo.Details">{{product.productInfo.Details}}</div> -->
            <!-- <div class="desc">123</div> -->
            <!-- 关于 -->
            <div class="about">
                <!-- 运费 -->
                <span class="freight">运费¥{{product.productInfo.Freight}}</span>
                <!-- 库存 -->
                <div class="stock">剩余{{product.productInfo.StockNum}}</div>
                <!-- 销量 -->
                <div class="sale">销量{{product.productInfo.SaleNum}}</div>
            </div>
        </div>
        <!-- 单元格区域 -->
        <van-cell title="配送方式" value="快递发货"/>
        <van-cell class="numWarp">
            <template slot="title">
                <span>数量</span>
                <van-stepper v-model="productNum" min="1" :max="product.productInfo.StockNum"/>
                <span>剩余{{product.productInfo.StockNum - productNum}}件</span>
            </template>
        </van-cell>
        <van-cell title="评价" value="共0条评价" is-link/>
        <van-cell title="商品详情" label="暂无详细内容" class="details"/>
        <!-- 商品导航 -->
        <van-goods-action>
            <van-goods-action-icon icon="wap-home" text="首页" @click="onConfirm"/>
            <van-goods-action-icon icon="cart-o" text="购物车" @click="onConfirm" />
            <van-goods-action-icon icon="chat-o" text="客服" @click="onConfirm" />
            <van-goods-action-button
                type="warning"
                text="加入购物车"
                style="border-radius:8px 0px 0px 8px; background: #FF9800"
                @click="onConfirm"
            />
            <van-goods-action-button
                type="danger"
                text="立即购买"
                style="border-radius:0px 8px 8px 0px; background: #FF3131"
                @click="showOpen"
            />
        </van-goods-action>
        <!-- 商品规格
            show                    是否显示sku             Boolean             false
            sku                     商品数据                Object              -
            goods                   商品信息                Object              -
            goods-id                商品ID                 String | Number      -
            quota                   限购数                  Number              0
            quota-used              已经购买的数量           Number              0
            hide-stock	            是否显示商品剩余库存     Boolean             flase
            message-config          留言相关配置            Object              {}
            close-on-click-overlay  是否在点击遮罩层后关闭   Boolean             false
        -->
        <van-sku
            v-model="show"
            :sku="product.sku"
            :goods="product.goods"
            :goods-id="1"
            :close-on-click-overlay="true"
            class="sku"
            @sku-selected="skuSelected"
        >   
            <template slot="sku-header-price">
                <div class="price"><i>¥ </i>{{price}}</div>                
                <div class="selected">{{selectedSku}}</div>
            </template>
            <template slot="sku-messages"><div></div></template>
            <template slot="sku-actions">
                <my-button
                    type="danger"
                    size="large"
                    btnMsg="确定"
                    @btnClick="onConfirm"
                ></my-button>
            </template>
        </van-sku>
    </div>
</template>

<script>
// 引入 轻提示
import { Toast } from 'vant'
// 解构 辅助函数
import { mapActions, mapState } from "vuex"
// 引入 混入组件
import { pagemixin } from "Mixins/pagemixin"
// 引入 公共组件
import MyNavBar from "Components/common/MyNavBar"
import MyButton from 'Components/common/MyButton'
import { ImagePreview } from "vant"

export default {
    mixins: [pagemixin],
    data() {
        return {
            swipeh: "", // 轮播图高度
            current: 0, // 当前选中的轮播位置
            count: 0, // 轮播图总计张数
            productNum: 1, // 商品数量
            show: false, // 弹出层状态
            selectedSku: '', // 选中类
            price: 0,  // 商品价格
        }
    },
    methods: {
        // 轮播图初始化
        swipeInit() {
            // 赋值 轮播图高度（正方形）
            this.swipeh = this.$refs.swipe.$el.clientWidth
            // 赋值 轮播图总计张数
            this.count = this.product.productInfo.Picture.length
        },
        onChange(index) {
            this.current = index
        },
        // 图片预览
        preview(index) {
            let arr = [];
            this.product.productInfo.Picture.forEach(item => {
                arr.push(
                    "http://insidexkd.oss-cn-shanghai.aliyuncs.com/" + item.imageUrl
                )
            })
            ImagePreview({
                images: arr,
                startPosition: index
            })
        },
        // 打开商品规格
        showOpen() {
            // 获取商品价格
            this.price = this.product.productInfo.SalePrice
            this.show = true
        },
        // 确认按钮
        onConfirm() {
            Toast({
                message: '仅提供预览功能',
                duration: 2000
            })
        },
        // 切换目类
        skuSelected(config) {
            let arr = []
            // 赋值 价格
            if (config.selectedSkuComb) {
                this.price = config.selectedSkuComb.price
            }
            
            for (var k in config.selectedSku) {
                if (config.selectedSku[k] != '') arr.push(config.selectedSku[k])
            }

            let title = '已选：'
            if (arr.length == 0) {
                title = ''
            }

            let str = ''
            arr.some(item => {
                str += item + ','
            })
            if (str.length > 0) {
                str = str.substr(0, str.length - 1)
            }
            // 赋值 已选
            this.selectedSku = title + str
        },
        ...mapActions(["getProductInfo"])
    },
    computed: {
        ...mapState(["product"])
    },
    components: {
        MyNavBar,
        MyButton
    },
    async created() {
        // 获取商品信息
            await this.getProductInfo(this.$route.params)
            this.swipeInit()
        }
    }
</script>

<style lang="stylus">
// 商品详情页
.productContainer 
    margin-top 46px
    margin-bottom 50px
    // 轮播图
    .van-swipe 
        position relative
        width 100%
        text-align center
        background rgba(247, 247, 247, 1)
        img 
            width auto
            height 100%
        // 索引
        .custom-indicator 
            position absolute
            bottom 0.24rem
            right 0.24rem
            width 0.9rem
            height 0.48rem
            background rgba(0, 0, 0, 1)
            opacity 0.45
            border-radius 0.24rem
            text-align center
            line-height 0.48rem
            color #fff
            i 
                font-size 0.32rem
    // 简介
    .panel 
        padding 0.24rem
        background #fff
        // 价格
        .priceWarp 
            margin-bottom 0.26rem
            font-family PingFang SC Regular
            .newPrice 
                font-size 0.28rem
                color #FF9800
                font-weight 700
                margin-right 0.11rem
                i 
                    font-weight 400
                    font-size 0.24rem
            .oldPrice 
                font-size 0.24rem
                color #BDBDBD
        // 商品名字
        .name 
            font-size 0.32rem
            line-height 0.41rem
            color #212121
            font-weight 500
            font-family PingFang SC
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-line-clamp 2
            -webkit-box-orient vertical
            margin-bottom 0.16rem
            // 标记
            .van-tag 
                margin-right 0.1rem
        // 描述
        .desc 
            font-family PingFang SC
            font-weight 500
            font-size 0.26rem
            line-height 0.32rem
            color rgba(66, 66, 66, 1)
            margin-bottom 0.16rem
        // 关于
        .about 
            display flex
            justify-content space-between
            font-size 0.24rem
            color #747474
    // 单元格
    .van-cell 
        margin-top 0.24rem
    // 计数单元格
    .numWarp 
        .van-cell__title 
            display flex
            align-items center
            .van-stepper 
                margin-left 0.44rem
                margin-right 0.16rem
    // 详情单元格
    .details 
        .van-cell__label 
            display flex
            justify-content center
            align-items center
            padding 0.24rem
    // 商品导航
    .van-goods-action 
        .van-goods-action-icon 
            color #424242
        .van-button 
            height 36px
            line-height 36px
            margin-top 8px
            font-size 14px
    // 商品规格
    .sku 
        // 确认按钮
        .loginBtnWarp 
            text-align center
            .van-button 
                border-radius 0.12rem   
        // 关闭按钮
        .van-icon-close 
            &::before 
                content "\F041"
        // 商品头像
        .van-sku-header__img-wrap
            border 1px solid #ccc
            border-radius 5px
            overflow hidden
        // 已选
        .van-sku-header__goods-info
            display flex
            flex-direction column
            justify-content space-around
            .van-sku__goods-name 
                display none
            .price
                color #FF9800
                font-size 0.36rem
                line-height 0.41rem
                i
                    font-size 0.28rem 
            .selected
                font-size 0.26rem
                color #424242
        // 计步器
        .van-sku-stepper-stock
            display flex
            align-items center
            .van-sku-stepper-container
                flex 0.6
            .van-sku__stock
                flex 0.4
                color #424242
        // 规格标签
        .van-sku-row__item
            border-color #F7F7F7
            background #F7F7F7
        .van-sku-row__item--active
            background #f44
            border-color #f44
</style>